<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <style>
        .box {
            width: 800px;
            height: 400px;
            border: 1px solid rgb(180, 248, 228);
        }
    </style>
</head>

<body>
    <div class="box" style="width: 600px; height: 400px;"></div>
</body>
<script>
    // 选择节点
    let dom = document.querySelector(".box")
    // 初始化
    let myChart = echarts.init(dom)
    let option = {
        title: {
            text: "主要疫情国家治愈率",   //   标题内容
            textAlign: "center",        //  居中对齐
            left: "50%",                //  标题水平位置
        },
        //  x轴
        xAxis: {
            type: "value", //  设置X轴为数值轴
        },
        //  y轴
        yAxis: [
            //  两个坐标轴
            {
                data: ["美国", "西班牙", "哥伦比亚", "英国", "意大利"], //  类目轴显示的内容
                type: 'category',  // 当前坐标轴为类目轴
            },
            {
                data: ["美国", "西班牙", "哥伦比亚", "英国", "意大利"], //  类目轴显示的内容
                type: 'category',  // 当前坐标轴为类目轴
                show: false,  //   类目轴是否显示
            }
        ],
        // 系列
        series: [
            {
                type: "bar",  //  柱状图
                data: [
                    { name: "美国", value: 100 },
                    { name: "西班牙", value: 100 },
                    { name: "哥伦比亚", value: 100 },
                    { name: "英国", value: 100 },
                    { name: "意大利", value: 100 },

                ],
                //  柱形图的样式
                itemStyle: {
                    color: "none",  //  柱子没有填充颜色
                    borderColor: "#d7e5f9",  //  柱子的边框颜色
                    borderWidth: 3,          //  柱子边框宽度
                    borderRadius: 20,   //   柱子圆角 
                },
                yAxisIndex: 0,   //   系列属于某个类目轴      
               
            },
            {
                type: "bar",  //  柱状图
                data:[13,89,58,73,28],
                barWidth:25,
                itemStyle:{
                    borderRadius:20,
                    color: "#dcdffb",  
                },
                yAxisIndex:1,     //     重要!!!!!!!!!!!!!!!!!!!!!! 
                  //  标签
                  label: {
                    show: true,  //  是否显示柱状图标签 
                    color: "#d1b6a2",   //  标签文字颜色
                    formatter:function(params){   //   标签内容格式
                        return params.value+'%'
                    }
                },
            }

        ]  
    }

    myChart.setOption(option)

</script>

</html>